<template>
 <div class="details">
  <!-- 图片详情轮播 -->
  <van-barrage v-model="carouselList" auto-play>
   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item
      v-for="photo in detail.photo"
      :key="photo.id"
    >
      <van-image
        :src="photo.url"
      />
    </van-swipe-item>
  </van-swipe>
  </van-barrage>
  <!-- 价格描述 -->
  <div class="priceBox">
    <div class="header">
      <div class="price">￥{{ detail.price }}</div>
      <div class="originPrice">原价：￥{{ detail.originPrice }}</div>
    </div>
    <div class="title">{{ detail.title }}</div>
    <div class="dec van-ellipsis">{{ detail.title }}</div>
  </div>

  <!-- 商品图片 -->
   <div class="images" v-for="img in detail.photo">
    <van-image
      :src="img.url"
      />
   </div>

   <!-- 加入购物车 -->
   <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon icon="cart-o" text="购物车" :badge="totalAmount" to="/cart"/>
      <van-action-bar-button type="warning" text="加入购物车" @click="handleAddCart"/>
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
 </div>
</template>

<script>
import { showSuccessToast } from 'vant'
import { getDetail } from '../../api/detail'
import { mapGetters } from 'vuex'

export default {
 name: 'Details',
 data() {
  return {
    detail: {}, //商品详情数据
    //弹幕数据
    carouselList: [
      {id: 100, text:'134****1935-购买了这个商品: 19秒前'},
      {id: 101, text:'157****7350-购买了这个商品: 45秒前'},
      {id: 102, text:'185****9608-购买了这个商品: 36秒前'},
      {id: 103, text:'183****4521-购买了这个商品: 59秒前'},
      {id: 104, text:'186****4476-购买了这个商品: 51秒前'},
      {id: 105, text:'151****4870-购买了这个商品: 23秒前'}
    ], 
  }
 },
 computed: {
  ...mapGetters('shoppingCart', ['totalAmount'])
 },
  async created(){
    // 获取查询详情数据的商品编号 id
    const { id } = this.$route.query
    const {detail} = await getDetail(id)
    // console.log(detail)
    this.detail = detail
  },
  methods: {
    handleAddCart(){
      // console.log('加入购物车')
      // 构建当前选购商品在购物车中保存的信息
      const {id, title, price, image} = this.detail
      const currGoods = {
        id,
        title,
        price,
        image
      }
      // 加入购物车，将当前选购的商品信息保存到store仓库中
      /**
       * 一个参数是命名空间/mutation中的方法
       * 第二个参数是购物车中的有效载荷
       */
      this.$store.commit('shoppingCart/addCart', currGoods)
      // 加入成功后给出轻提示
      showSuccessToast({
        message: '加入成功',
        duration: 1000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.details{
  background-color: #ebedf0;
  .my-swipe{
    margin-bottom: 6px;
  }
}
.priceBox{
  width: 363px;
  height: 121px;
  align-items: center;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
}
.header{
  height: 34px;
  display: flex;
  align-items: center;
  .price{
    color: red;
    font-size: 24px;
    font-weight: 700;
  }
  .originPrice{
    color: #999;
    margin-left: 20px;
    text-decoration: line-through;
    font-size: 16px;
    font-style: italic
  }
}
.title{
  font-weight: 700;
  margin-bottom: 14px;
}
.dec{
  font-size: 14px;
}
.images{
  width: 363px;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
